<div class="box-container">
    <div class="search-wrap">
<!--        <div class="radio-wrap">-->
<!--            <nz-radio-group [(ngModel)]="radioValue">-->
<!--                <label nz-radio nzValue="single">单渠道分析</label>-->
<!--                <label nz-radio nzValue="multi">多渠道分析</label>-->
<!--            </nz-radio-group>-->
<!--        </div>-->

        <div class="time-picker-wrap">
            <nz-range-picker
                [nzRanges]="topDateRanges"
                [(ngModel)]="topDateModal"
                (ngModelChange)="queryInfo()">
            </nz-range-picker>
            <!--<button nz-button nzType="primary" (click)="queryInfo()" style="margin-left: 15px">-->
            <!--<i nz-icon nzType="search"></i> 查询-->
            <!--</button>-->
        </div>

        <!--<div class="month-picker-wrap">-->
        <!--<nz-select nzAllowClear nzPlaceHolder="年度" style="width: 120px;margin-right: 30px;">-->
        <!--<nz-option nzLabel="2019" nzValue="2019"></nz-option>-->
        <!--<nz-option nzLabel="2018" nzValue="2018"></nz-option>-->
        <!--<nz-option nzLabel="2017" nzValue="2017"></nz-option>-->
        <!--<nz-option nzLabel="2016" nzValue="2016"></nz-option>-->
        <!--</nz-select>-->
        <!--<nz-radio-group [(ngModel)]="monthPickerValue" [nzButtonStyle]="'solid'">-->
        <!--<label nz-radio-button nzValue="4">4月</label>-->
        <!--<label nz-radio-button nzValue="5">5月</label>-->
        <!--<label nz-radio-button nzValue="6">6月</label>-->
        <!--<label nz-radio-button nzValue="7">7月</label>-->
        <!--<label nz-radio-button nzValue="8">8月</label>-->
        <!--<label nz-radio-button nzValue="9">9月</label>-->
        <!--<label nz-radio-button nzValue="10">10月</label>-->
        <!--<label nz-radio-button nzValue="11">11月</label>-->
        <!--</nz-radio-group>-->
        <!--</div>-->

        <div class="button-wrap">
            <!--<button nz-button nzType="primary">打印</button>-->
            <button nz-button nzType="primary" (click)="exportFile()">导出</button>
        </div>

    </div>

    <div class="main-container">
        <ng-container *ngIf="radioValue == 'single'">
            <div class="main-content">
                <div class="main-content-wrap">
                    <div class="left-panel">
                        <ul nz-menu nzMode="inline" class="hr-statistics-left-menu">
                            <li nz-menu-item
                                *ngFor="let item of listData; let idx = index"
                                [nzSelected]="idx === 0"
                                (click)="selectedAreaChanged(item)">
                                {{item.item}}
                            </li>
                        </ul>
                    </div>

                    <div class="right-panel">
                        <div class="right-top-box">

                            <div class="right-content">

                                <div class="card-box">
                                    <ng-template #swllCardTemplate>
                                        <div class="card-search-wrap">
                                            <nz-range-picker [(ngModel)]="waterLevelDateModal"></nz-range-picker>
                                            <div>
                                                <i nz-icon nzType="search" class="search-icon" nzTheme="outline"
                                                   (click)="onQueryProcessList()"></i>
                                            </div>
                                            <!--</button>-->
                                        </div>
                                    </ng-template>
                                    <ng-template #xytzzCardTemplate>
                                        <div class="card-search-wrap">
                                            <form nz-form [nzLayout]="'inline'" [formGroup]="monthForm">
                                                <nz-form-item>
                                                    <!--<nz-form-label>特征值</nz-form-label>-->
                                                    <nz-form-control>
                                                        <nz-select formControlName="valType" [nzAllowClear]="false"
                                                                   nzPlaceHolder="特征值">
                                                            <nz-option nzLabel="最高水位" nzValue="1"></nz-option>
                                                            <nz-option nzLabel="最低水位" nzValue="2"></nz-option>
                                                            <nz-option nzLabel="平均水位" nzValue="3"></nz-option>
                                                            <nz-option nzLabel="最高流量" nzValue="4"></nz-option>
                                                            <nz-option nzLabel="最低流量" nzValue="5"></nz-option>
                                                            <nz-option nzLabel="平均流量" nzValue="6"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <!--<nz-form-label>时间类型</nz-form-label>-->
                                                    <nz-form-control>
                                                        <nz-select formControlName="dateType" [nzAllowClear]="false">
                                                            <nz-option nzLabel="月" nzValue="1"></nz-option>
                                                            <nz-option nzLabel="旬" nzValue="2"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>

                                                <nz-form-item>
                                                    <!--<nz-form-label>历史年份</nz-form-label>-->
                                                    <nz-form-control>
                                                        <nz-year-picker style="width: 75px;"
                                                                        [nzDisabledDate]="disabledStartDate"
                                                                        nzFormat="yyyy"
                                                                        formControlName="startYear"
                                                                        (ngModelChange)="onStartChange($event)"
                                                                        (nzOnOpenChange)="handleStartOpenChange($event)"></nz-year-picker>
                                                        至
                                                        <nz-year-picker style="width: 75px;"
                                                                        [nzDisabledDate]="disabledEndDate"
                                                                        nzFormat="yyyy"
                                                                        formControlName="endYear"
                                                                        [nzOpen]="endOpen"
                                                                        (ngModelChange)="onEndChange($event)"
                                                                        (nzOnOpenChange)="handleEndOpenChange($event)">
                                                        </nz-year-picker>

                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-label>当前</nz-form-label>
                                                    <nz-form-control>
                                                        <input style="width: 58px;" formControlName="currYear" nz-input
                                                               readonly/>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-control>
                                                        <i nz-icon nzType="search" class="search-icon" nzTheme="outline"
                                                           (click)="onQueryMonthList()"></i>
                                                    </nz-form-control>
                                                    <!--<button nz-button nzType="primary" (click)="onQueryMonthList()">确定</button></nz-form-control>-->
                                                </nz-form-item>
                                            </form>
                                        </div>
                                    </ng-template>
                                    <ng-template #lstqCardTemplate>
                                        <div class="card-search-wrap">
                                            <form nz-form [nzLayout]="'inline'" [formGroup]="historyForm">
                                                <nz-form-item>
                                                    <!--<nz-form-label>类型</nz-form-label>-->
                                                    <nz-form-control>
                                                        <nz-select formControlName="valType" [nzAllowClear]="false"
                                                                   nzPlaceHolder="类型">
                                                            <nz-option nzLabel="水位" nzValue="1"></nz-option>
                                                            <nz-option nzLabel="流量" nzValue="2"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <!--<nz-form-label>历史年</nz-form-label>-->
                                                    <nz-form-control>
                                                        <nz-select nzAllowClear nzPlaceHolder="历史年"
                                                                   formControlName="yearStr" nzMode="multiple"
                                                                   style="min-width: 105px">
                                                            <nz-option *ngFor="let option of historyYearList"
                                                                       [nzLabel]="option"
                                                                       [nzValue]="option"></nz-option>
                                                        </nz-select>
                                                    </nz-form-control>
                                                </nz-form-item>

                                                <nz-form-item>
                                                    <!--<nz-form-label>时间</nz-form-label>-->
                                                    <nz-form-control>
                                                        <nz-date-picker style="width: 105px;" [nzDisabledDate]="disabledHistoryStartDate"
                                                                        nzFormat="MM-dd"
                                                                        formControlName="startDateStr"
                                                                        (ngModelChange)="onStartHistoryChange($event)"
                                                                        (nzOnOpenChange)="handleStartHistoryOpenChange($event)">

                                                        </nz-date-picker>
                                                            至
                                                        <nz-date-picker style="width: 105px;" [nzDisabledDate]="disabledHistoryEndDate"
                                                                        nzFormat="MM-dd"
                                                                        formControlName="endDateStr"
                                                                        [nzOpen]="endHistoryOpen"
                                                                        (ngModelChange)="onEndHistoryChange($event)"
                                                                        (nzOnOpenChange)="handleEndHistoryOpenChange($event)">
                                                        </nz-date-picker>

                                                    </nz-form-control>
                                                </nz-form-item>

                                                <nz-form-item>
                                                    <nz-form-control>
                                                        <i nz-icon nzType="search" class="search-icon" nzTheme="outline"
                                                           (click)="onQueryHistory()"></i>
                                                    </nz-form-control>
                                                </nz-form-item>
                                            </form>
                                        </div>
                                    </ng-template>
                                    <nz-card [nzTitle]="stationName + '水位流量过程线'"
                                             class="card" [nzExtra]="swllCardTemplate">
                                        <div
                                            echarts
                                            [options]="processOpt"
                                            [merge]="processOptChange"
                                            style="height: 329px;"
                                        ></div>
                                    </nz-card>

                                    <nz-card [nzTitle]="stationName + '旬月特征值对比'"
                                             class="card" [nzExtra]="xytzzCardTemplate">

                                        <div
                                            echarts
                                            [options]="monthOpt"
                                            [merge]="monthOptChange"
                                            style="height: 291px;"
                                        ></div>
                                    </nz-card>
                                    <nz-card [nzTitle]="stationName + '历史同期对比'"
                                             class="card" [nzExtra]="lstqCardTemplate">
                                        <div
                                            echarts
                                            [options]="historyOpt"
                                            [merge]="historyOptChange"
                                            style="height: 291px;"
                                        ></div>
                                    </nz-card>
                                </div>
                                <div class="card-box">
                                    <nz-card [nzTitle]="stationName + '监测数据'"
                                             class="card">
                                        <nz-table
                                            #dataTable
                                            nzBordered
                                            [nzData]="tableData"
                                            [nzPageSize]="pageSize"
                                            nzSize="middle">
                                            <thead>
                                            <tr>
                                                <th>日期</th>
                                                <th>时间</th>
                                                <th>水位</th>
                                                <th>流量</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr *ngFor="let row of dataTable.data">
                                                <td>{{ row.date }}</td>
                                                <td>{{ row.time }}</td>
                                                <td>{{ row.wl }}</td>
                                                <td>{{ row.flow }}</td>
                                            </tr>
                                            </tbody>
                                        </nz-table>
                                    </nz-card>
                                </div>
                                <!--<nz-card [nzTitle]="stationName + '特征及统计值'"-->
                                <!--class="card">-->
                                <!--<form nz-form [formGroup]="featureForm" class="form-content">-->
                                <!--<div nz-row [nzGutter]="24">-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>警戒水位</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="警戒水位" formControlName="alertWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>保证水位</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="保证水位" formControlName="limitWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>最大值</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="最大值" formControlName="maxWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>最小值</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="最小值" formControlName="minWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>最大值出现时间</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="最大值出现时间" formControlName="maxTime">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>最小值出现时间</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="最小值出现时间" formControlName="minTime">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->

                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>平均值</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="平均值" formControlName="avgWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>中位值</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="中位值" formControlName="medianWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>前3年平均值</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="前3年平均值" formControlName="last3AvgWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>前3年中位值</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="前3年中位值" formControlName="last3MedianWl">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>中位值与前三年对比</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="中位值与前三年对比"-->
                                <!--formControlName="last3MedianPer">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--<div nz-col [nzSpan]="12">-->
                                <!--<nz-form-item nzFlex>-->
                                <!--<nz-form-label>平均值与前三年对比</nz-form-label>-->
                                <!--<nz-form-control>-->
                                <!--<input nz-input placeholder="平均值与前三年对比" formControlName="last3AvgPer">-->
                                <!--</nz-form-control>-->
                                <!--</nz-form-item>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--</form>-->
                                <!--</nz-card>-->



                                <!--<nz-card [nzTitle]="stationName + '水位流量关系曲线'"-->
                                         <!--class="card">-->
                                    <!--<div class="diagram-box">-->
                                        <!--<img src="./assets/images/map/monitor/diagram-aa.png" alt=""/>-->
                                    <!--</div>-->
                                <!--</nz-card>-->
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </ng-container>

        <ng-container *ngIf="radioValue == 'multi'">
            <app-agri-canal-multi [dateModal]="waterLevelDateModal"></app-agri-canal-multi>
        </ng-container>
    </div>

</div>
